<template>
    <div>
        <common-header></common-header>
        <common-title></common-title>
        <admin-list @insert="handleInsert" @file="handleFile" @alter="handleAlter" @handleDelete="handleHandleDelete"
        :List="list">
        </admin-list>
        <common-pagination @curPageChanged="handlecurPageChanged" :totalData="totalData">
        </common-pagination>
        <common-fade>
          <admin-insert v-if="show1" @cancle="handleInsert" @insertPerson="handleInsertPerson"></admin-insert>
        </common-fade>
        <common-fade>
          <admin-file v-if="show2" @cancle="handleFile" @afterFile="handleAfterFile"></admin-file>
        </common-fade>
         <common-fade>
          <admin-alter v-if="show3" @cancle="handleAlter" :obj="obj" @alterPerson="handleAlterPerson"></admin-alter>
        </common-fade>
    </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'Vuex'
import CommonHeader from 'common/components/header'
import CommonTitle from 'common/components/title'
import CommonPagination from 'common/Pagination'
import CommonFade from 'common/fade'
import adminAlter from './components/Alter'
import adminInsert from './components/Insert'
import adminFile from './components/File'
import adminList from './components/List'
export default {
  name: 'admin',
  components: {
    CommonHeader,
    CommonTitle,
    CommonFade,
    CommonPagination,
    adminAlter,
    adminInsert,
    adminFile,
    adminList
  },
  data () {
    return {
      obj: {},
      show1: false,
      show2: false,
      show3: false,
      personIndex: '',
      curPage: '1',
      totalPages: '',
      totalData: '',
      // list: [{
      //   vId: '1111',
      //   vPassword: '123456',
      //   vName: '雷佳音'
      // }, {
      //   vId: '1234',
      //   vPassword: '123456',
      //   vName: '雷佳音'
      // }]
      list: []
    }
  },
  methods: {
    handleInsert () {
      this.show1 = !this.show1
    },
    handleInsertPerson (a) {
      this.list.unshift(a)
      this.show1 = false
      this.totalData = Number(this.totalData )
      this.totalData += 1
      this.totalData = this.totalData.toString()
    },
    handleHandleDelete () {
       this.totalData = Number(this.totalData )
      this.totalData -= 1
      this.totalData = this.totalData.toString()
    },
    handleFile () {
      this.show2 = !this.show2
    },
    handleAfterFile () {
      this.getAdminInfo()
      this.show2 = false
    },
    handleAlter (e, index) {
      this.show3 = !this.show3
      this.obj = e
      this.personIndex = index
    },
    handleAlterPerson (e) {
      this.list.splice(this.personIndex, 1, e)
      this.show3 = false
    },
    handlecurPageChanged (curPage) {
      this.curPage = curPage
      this.getAdminInfo()
    },
    getAdminInfo () {
      // console.log(this.userId)
      // console.log(this.curPage.toString())
      axios.post('http://192.168.43.188:8081/getVoters', {
        'id': this.userId,
        'pn': this.curPage.toString()
        // 'jd': '0'
      }).then(({status, data}) => {
        //console.log(data.info)
        if (data && data.msg === '111') {
          this.totalPages = data.tp.toString()
          this.totalData = data.td.toString()
          this.list = data.info
        } else if (data.msg) {
          swal(data.msg, '', 'error')
        }
      }).catch((error) => {
        swal('Info' + error, '', 'error')
      })
    },
    back () {
      if (!this.userPassword) {
        swal("请重新登录输入密码", '', 'warning')
        this.$router.push('/')
      }
    }
  },
  computed: {
    ...mapState(['userPassword']),
    ...mapState(['userId'])
  },
  watch: {
    list () {
      const pages = []
      if (!pages[this.curPage]) {
        pages[this.curPage] = []
      }
      pages.push(this.list)
    }
  },
  mounted () {
    this.back()
    this.getAdminInfo()
  }
}
</script>

<style lang="stylus" scoped>
</style>
